<template>
	<view>
		<view class="box" @click="jumplogin" v-if="show">
			<uni-icons class="contact" type="contact" size="90"></uni-icons>
			<view class="contact1">登录</view>
		</view>
		 <div class="test-component pon" v-else>
			 <view class="outlog">
				 <button type="default" @click="outlogin" size="mini">退出登录</button>
			 </view>
		    <hm-head-portrait-card :options="options"></hm-head-portrait-card>
		  </div>
		<uni-grid :column="4" class="column1">
			<uni-grid-item>
				<uni-icons class="icons" type="info" size="30"></uni-icons>
				<text class="text">浏览历史</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="star" size="30"></uni-icons>
				<text class="text">我的收藏</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="personadd" size="30"></uni-icons>
				<text class="text">我的参与</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="paperplane" size="30"></uni-icons>
				<text class="text">我发布的</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="phone" size="30"></uni-icons>
				<text class="text">消息通知</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="pengyouquan" size="30"></uni-icons>
				<text class="text">关于我们</text>
			</uni-grid-item>
		</uni-grid>
		<uni-grid :column="4">
			<uni-grid-item>
				<uni-icons class="icons" type="close" size="30"></uni-icons>
				<text class="text">清空本地</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="cloud-upload" size="30"></uni-icons>
				<text class="text">上传数据</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="cloud-download" size="30"></uni-icons>
				<text class="text">下载数据</text>
			</uni-grid-item>
			<uni-grid-item>
				<uni-icons class="icons" type="email" size="30"></uni-icons>
				<text class="text">版本信息</text>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import uniIcons from "../../common/uni-icons/uni-icons.vue"
	import uniGrid from "../../common/uni-grid/uni-grid.vue"
	import uniGridItem from "../../common/uni-grid-item/uni-grid-item.vue"
	import HmHeadPortraitCard from '@/components/hm-head-portrait-card/index.vue'
	export default {
		components: {
			uniGrid,
			uniGridItem,
			uniIcons,
			HmHeadPortraitCard
		},
		data() {
			return {
				show:true,
				 options: {
				          actionBg:
				            '/static/hm-head-portrait-card/images/img_25814_0_0.png',
				          avator:
				            '/static/logo.png',
				          name: '@李莉儿',
						  info: '旅行社代理人',
						  attention: '身份',
						  num: '1570',
				        }
			}
		},
		methods: {
		jumplogin(){
			uni.navigateTo({
				url:'../login/login'
			})
		},
		outlogin(){
			uni.showModal({
			    title: '退出登录',
			    content: '是否退出登录？',
			    success: function (res) {
			        if (res.confirm) {
						// uni.clearStorageSync()
			   //           uni.switchTab({
			   //           	url:'../setting/setting'
			   //           })
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		}
	},
	onShow: function() {
		uni.getStorage({
				key: 'zxwx020430',
				success: (res) => {
					let user=JSON.parse(res.data||"[]")
					if(user.length>0){
						this.show=false
						console.log(user[0])
						this.options.name=user[0].name
						this.options.info=user[0].introduction
						this.options.num=user[0].roles
						uni.showModal({
							title: '登陆',
							content: "您已成功登录",
							showCancel:false
						})
					}
				},
			})
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
.text {
		margin: 0 auto;
		/* margin-top: 10px; */
	}
	.pon{
		position: relative;
		}

	.icons {
		margin-top: 10px;
	}
	.outlog{
		position: absolute;
		    top: 40px;
		    z-index: 99999;
		    right: 10px;
		
	}
	.box {
		text-align: center;
		margin:  10px 0;
	}

	.column1 {
		margin-bottom: 20px;
	}
	.contact1{
		font-size: 50rpx;
	}
</style>
